import React from 'react';
import {
    View,
    ScrollView,
    Image,
    Text,
    StyleSheet,
    TouchableOpacity,
} from 'react-native';

export default function HomeTabs(props: {
    categoryList: any;
    activeCategoryId: number;
    changeCategory:Function
}) {
    let { categoryList, activeCategoryId , changeCategory } = props;
    return (
        <View style={{ height: 72 , marginBottom:12 }}>
            <ScrollView horizontal={true} style={{ paddingLeft: 0 }}>
                {categoryList.map((item: any) => (
                    <TouchableOpacity key={item.id} activeOpacity={0.5} onPress={()=>changeCategory(item.id)}>
                        <View
                            style={[
                                styles.tabLayout,
                                item.id === activeCategoryId && styles.activeTab,
                            ]}>
                            <Image
                                style={styles.tabImage}
                                source={{ uri: item.json_content.icon_cn }}
                            />
                            <Text
                                style={[
                                    styles.tabText,
                                    item.id === activeCategoryId && styles.activeTabText,
                                ]}>
                                {item.json_content.title_cn}
                            </Text>
                            {item.id === activeCategoryId && (
                                <View style={styles.activeLine}></View>
                            )}
                        </View>
                    </TouchableOpacity>
                ))}
            </ScrollView>
        </View>
    );
}
const styles = StyleSheet.create({
    tabLayout: {
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
        paddingVertical: 8,
        paddingHorizontal: 6,
        height: 60,
        opacity: 0.7,
        position: 'relative',
    },
    activeTab: {
        opacity: 1,
    },
    tabImage: {
        width: 44,
        height: 37,
        marginBottom: 6,
    },
    tabText: {
        color: '#85848c',
        fontSize: 12,
        zIndex: 1,
        textAlign:'center'
    },
    activeTabText: {
        fontSize: 13,
        fontWeight: 600,
        color: '#000',
        
    },
    activeLine: {
        position: 'absolute',
        width: '100%',
        height: 6,
        borderRadius: 6,
        bottom: 2,
        left: 6,
        backgroundColor: '#FFC423',
        zIndex:-1
    },
});
